import './index.less';
import { useEffect, useState } from 'react'
import { useDispatch, useSelector, QuestionModelState, LoginModelState } from 'umi';
import { Input, Select, Button, Form } from 'antd';
const { Option } = Select;
import Editor from 'for-editor'
const addQuestion: React.FC = () => {
  let dispatch = useDispatch();
  useEffect(() => {
    //获取考试类型
    dispatch({
      type: 'question/getExamType'
    })
    //获取课程类型
    dispatch({
      type: 'question/getSubject'
    })
    //获取试题类型
    dispatch({
      type: 'question/getGetQuestionsType'
    })
    //获取登录用户信息
    dispatch({
      type: 'login/userInfo'
    })
  }, [])
  let { questionsType, examType, subject, getQuestions_newlist } = useSelector((model: { question: QuestionModelState }) => model.question);
  let { loginuser } = useSelector((model: { login: LoginModelState }) => model.login)
  // console.log(questionsType,examType,subject,loginuser);

  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
    let { questions_type_id, questions_stem, subject_id, exam_id, questions_answer, title } = values
    dispatch({
      type: "question/postQuestions",
      payload: {
        questions_type_id,
        questions_stem,
        subject_id,
        exam_id,
        user_id: loginuser.user_id,
        questions_answer,
        title
      }
    })
  };
  return (
    <div className="addQuestion">
      <h2>添加试题 </h2>
      <div className="addQuestion_conntent">
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <div className='addtestmain'>
            <div className='addtestmains'>
              <div className='addtestmainsTimu'>
                <div className='addtestmainsTimubox1'>
                  <h1>题目信息</h1>
                  <h3>题干</h3>
                  <Form.Item
                    name="title"
                    rules={[{ required: true, message: 'Please input your Username!' }]}
                  >
                    <Input placeholder="题干信息" className='addtestmainsTimuInput' />
                  </Form.Item>
                </div>
                <div className='addtestmainsTimubox2'>
                  <h3>题目主题</h3>
                  <Form.Item
                    name="questions_stem"
                  >
                    <Editor />
                  </Form.Item>
                </div>
              </div>
              <div className='addtestmainsDaan'>
                <span>
                  <h3>请选择考试类型:</h3>
                  <Form.Item
                    name="exam_id"
                  >
                    {examType.length && <Select style={{ width: 320 }} >
                      {examType.map(item => <Option value={item.exam_id} key={item.exam_name}>{item.exam_name}</Option>)}
                    </Select>}
                  </Form.Item>
                </span>
                <span>
                  <h3>请选择课程类型:</h3>
                  <Form.Item
                    name="subject_id"
                  >
                    {subject.length && <Select style={{ width: 320 }}>
                      {subject.map(item => <Option value={item.subject_id} key={item.subject_text}>{item.subject_text}</Option>)}
                    </Select>}
                  </Form.Item>
                </span>
                <span>
                  <h3>请选择题目类型:</h3>
                  <Form.Item
                    name="questions_type_id"
                  >
                    {questionsType.length && <Select style={{ width: 320 }}>
                      {questionsType.map(item => <Option value={item.questions_type_id} key={item.questions_type_text}>{item.questions_type_text}</Option>)}
                    </Select>}
                  </Form.Item>
                </span>
              </div>
              <div className='addtestmainsDaan1'>
                <h1>答案信息</h1>
                <Form.Item
                  name="questions_answer"
                >
                  <Editor />
                </Form.Item>
                <Form.Item
                  name="submit"
                >
                  <p><Button type="primary" htmlType="submit" className="login-form-button">提交</Button></p>
                </Form.Item>
              </div>
            </div>
          </div>
        </Form>
      </div>
    </div>
  )
}
export default addQuestion